<template>
  <div class="app-container">
    <div>
      <template>
        <el-select v-model="value" clearable placeholder="请选择订单状态" style="margin-right: 150px;">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>

        <el-select v-model="value" style="width: 120px" clearable placeholder="商品类别">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-input placeholder="请输入内容" v-model="value" style="width: 300px"/>
        <el-button icon="el-icon-search"></el-button>
      </template>
    </div>
    <div class="div-table">
      <el-table
        ref="multipleTable"
        :data="tableData"
        border
        stripe
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center">
        </el-table-column>

        <el-table-column label="订单号" align="center" prop="name">
        </el-table-column>

        <el-table-column label="投诉类型" align="center" prop="address">
        </el-table-column>

        <el-table-column label="创建时间" align="center" prop="date">
        </el-table-column>
        <el-table-column label="联系姓名" align="center" prop="date">
        </el-table-column>
        <el-table-column label="联系电话" align="center" prop="date">
        </el-table-column>
        <el-table-column label="归宿账号" align="center" prop="date">
        </el-table-column>
        <el-table-column label="归宿程序" align="center">
          <template>
            <span>无</span>
          </template>
        </el-table-column>
        <el-table-column label="归属门店  " align="center">
          <template>
            <span>架子鼓</span>
          </template>
        </el-table-column>
        <el-table-column label="订单状态" align="center">

        </el-table-column>
        <el-table-column label="状态" align="center">
          <template v-slot="scope">
            <el-tag size="medium">使用中</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template v-slot="scope">
            <el-button type="warning" size="mini">看不清</el-button>
            <el-button type="danger" size="mini" @click="deleteRow(scope.row.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="1000"
        style="text-align: right"
      >
      </el-pagination>
    </div>
  </div>
</template>

<style scoped>

</style>
<script>
</script>
